<template>
  <div class="account-trad" v-loading="loading">
    <div class="input-box">
        <el-input
            placeholder="搜索趣ID、QQ号、游戏昵称"
            @keyup.enter.native="selectChange"
            style="width:240px;"
            clearable
            v-model.trim="keyWord">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-input
            placeholder="搜索订单号"
            @keyup.enter.native="selectChange"
            style="width:240px; margin-left: 10px;"
            clearable
            v-model.trim="orderNo">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <!-- <span class="input-title">道具筛选</span> -->
        <span class="input-title">类型</span>
        <el-select v-model="modeType" placeholder="请选择" @change="modeStatusChange">
          <el-option
            v-for="item in modeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span class="input-title">订单状态</span>
        <el-select v-model="accountStatus" placeholder="请选择" @change="statusChange">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span class="input-title">游戏</span>
        <el-select v-model="gameType" placeholder="请选择" @change="gameStatusChange">
          <el-option
            v-for="item in gameOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!-- 添加平台 -->
        <span class="input-title">平台</span>
        <el-select v-model="platForm" placeholder="请选择" @change="typeStatusChange">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
    </div>
    <div class="input-box" style="position: relative">
      <!-- 托管日期 -->
        <span class="input-title" style="margin-left: 10px;">下单时间</span>
            <el-date-picker
                @change="getList(1)"
                style="width: 300px;"
                v-model="date"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        <el-button type="primary" class="btn" style="margin-left:20px" @click="getList(1)">查询</el-button>
        <el-button class="btn" style="margin-left:20px" @click="reset">重置</el-button>
        <!-- <el-button type="success" class="btn" @click="exportData" style="position: absolute; right: 10px">导出</el-button> -->
    </div>
    <div class="table-box">
      <el-table :data="tableData" ref="table" border style="width: 100%"  @sort-change="sortChange">
          <el-table-column width="180" label="订单号">
            <template slot-scope="scope">
              <p class="table-btn" @click="goDetail(scope.row)">{{ scope.row.orderNo }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="gameName" label="游戏"></el-table-column>
          <el-table-column width="180" prop="title" label="账号">
            <template slot-scope="scope">
              <p class="table-btn" @click="goQQDetails(scope.row)">QQ：{{ scope.row.accountNo }}</p>
              <div>{{ scope.row.areaType === 1 ? '安卓' : scope.row.areaType === 2 ? 'IOS' : '-' }}-<span>{{ scope.row.serverName }}</span></div>
              <p class="table-btn" @click="goUser(scope.row.accountUserId)">号主：{{ scope.row.accountUserId }}</p>
            </template>
          </el-table-column>
          <el-table-column width="180" prop="accountNo" label="买家">
            <template slot-scope="scope">
              <div class="table-btn" @click="goUser(scope.row.userId)">{{ scope.row.userId }}</div>
            </template>
          </el-table-column>
          <el-table-column width="140" prop="worth" label="估值" sortable="custom"></el-table-column>
          <el-table-column width="140" prop="price" label="售价（元）" sortable="custom"></el-table-column>
          <el-table-column width="140" prop="buyerInsurePrice" label="保费" sortable="custom">
            <template slot-scope="scope">
              <div>{{ scope.row.buyerInsurePrice }} <span v-if="scope.row.dayNum">({{ scope.row.dayNum }}天)</span></div>
            </template>
          </el-table-column>
          <el-table-column width="140" prop="paymentPrice" label="实付（元）" sortable="custom"></el-table-column>
          <el-table-column width="100" label="类型">
            <template slot-scope="scope">
              <div>{{ scope.row.serveType ? '顾问模式' : '普通模式'}}</div>
            </template>
          </el-table-column>
          
          <el-table-column width="100" prop="orderStatus" label="订单状态">
            <template slot-scope="scope">
                <span v-if="scope.row.orderStatus === 0">待支付</span>
                <div v-else-if="scope.row.orderStatus === 1">
                  <p>取消订单</p>
                  <p style="font-size: 12px; color: #FF9812;">({{ scope.row.statusRemark }}）</p>
                </div>
                <span v-else-if="scope.row.orderStatus === 2" style="color:#67C23A;">换绑信息</span>
                <span v-else-if="scope.row.orderStatus === 3" style="color: #F56C6C;">退款中</span>
                <span v-else-if="scope.row.orderStatus === 4">售中退款</span>
                <span v-else-if="scope.row.orderStatus === 5">换绑信息</span>
                <span v-else-if="scope.row.orderStatus === 6">交易完成</span>
                <div v-else-if="scope.row.orderStatus === 7">
                  <p>找回赔偿</p>
                  <p v-if="scope.row.loseMoney" style="color: red;">(平台赔付 {{ scope.row.loseMoney }} 元)</p>
                </div>
            </template>
          </el-table-column>
          <el-table-column width="180" prop="createTime" label="下单时间">
            <template slot-scope="scope">
              <div>
                {{ formatDate(scope.row.createTime, 'YYYY-MM-DD HH:MM:SS') }}
              </div>
            </template>
          </el-table-column>

          <el-table-column width="180" prop="paymentTime" label="支付时间"></el-table-column>
          <!-- <el-table-column label="操作">
              <template slot-scope="scope">
                  <div>
                    <el-button style="margin-left: 10px;" @click="goDetail(scope.row)" type="text" size="small">查看详情</el-button>
                  </div>
                  <div v-if="scope.row.status === 1">
                      <p><el-button style="margin-left: 10px;color:#67C23A;" @click="setAuditStatus(scope, 2)" type="text" size="small">通过</el-button></p>
                      <p><el-button style="margin-left: 10px;color:red;" @click="openDialog(scope, -1)" type="text" size="small">拒绝</el-button></p>
                  </div>
              </template>
          </el-table-column> -->
      </el-table>
    </div>

    <div class="tools">
        <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="pageNum"
            :page-sizes="_pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>

    <el-dialog
        class="dialog-box"
        title="拒绝理由:"
        :visible.sync="dialogVisible"
        width="500px">
        <div>
            <el-input type="textarea" maxlength="200" rows="3" show-word-limit v-model.trim="reason"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="changeStatusPauseOff">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate } from '@/utils/utils'
import { export2Excel } from '@/excel/util'

export default {
  data () {
    return {
      date: [],
      loading: false,
      dialogVisible: false,
      reason: '',
      keyWord: '',
      orderNo: '',
      data: [],
      platForm: 0,
      typeOptions: [ //平台选择字段
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '安卓'
        },
        {
          value: 2,
          label: 'IOS'
        }
      ],
      modeType: 100,
      modeOptions: [
        {
          value: 100,
          label: '全部'
        },
        {
          value: 0,
          label: '普通模式'
        },
        {
          value: 1,
          label: '顾问模式'
        }
      ],
      accountStatus: 10,
      gameType: 0,
      options: [
        {
          value: 10,
          label: '全部'
        },
        {
          value: 0,
          label: '待支付'
        },
        {
          value: 1,
          label: '取消订单'
        },
        // {
        //   value: 2,
        //   label: '待验号'
        // },
        {
          value: 3,
          label: '退款中'
        },
        {
          value: 4,
          label: '售中退款'
        },
        {
          value: 5,
          label: '换绑信息'
        },
        {
          value: 6,
          label: '交易完成'
        },
        {
          value: 7,
          label: '找回赔偿'
        }
      ],
      
      gameOptions: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1104466820,
          label: '王者荣耀'
        },
        {
          value: 1106467070,
          label: '和平精英'
        }
      ],
      tableData: [],
      srcList: [],
      pageNum: 1,
      pageSize: 10,
      total: 12,
      type: '',
      sort: ''
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 打印
    exportData() {
        this.columns = [{
            title: '订单号', key: 'orderNo'
        },
        {
            title: '游戏', key: 'gameName'
        },
        {
            title: '账号', key: 'accountNoDesc'
        },
        {
            title: '买家', key: 'userId'
        },
        {
            title: '估值（元）', key: 'worth'
        },
        {
            title: '售价（元）', key: 'price'
        },
        {
            title: '实付（元）', key: 'paymentPrice'
        },
        {
            title: '类型', key: 'mode'
        },
        {
            title: '订单状态', key: 'orderStatusDesc'
        },
        {
            title: '下单时间', key: 'createTimeDesc'
        },
        {
            title: '支付时间', key: 'paymentTimeDesc'
        }
      ]
      this.getList(1, true)
    },
    // 后端排序
    sortChange ({ column, prop, order }) {
        this.sort = order || ''
        // 如果没有 sort prop 置为空
        if (this.sort === 'ascending') {
            this.sort = 'asc'
        } else {
            this.sort = 'desc'
        }
        if (prop === 'price') {
          this.type = 0
        } else if (prop === 'paymentPrice') {
          this.type = 1
        } else if (prop === 'worth') {
          this.type = 2
        } else if (prop === 'buyerInsurePrice') {
          this.type = 3
        }
        this.getList(1)
    },
    modeStatusChange (type) {
      this.modeType = type
      this.accountStatus = 10
      this.getList(1)
    },
    reset() {
      this.pageNum = 1
      this.accountStatus = 10
      this.keyWord = ''
      this.gameType = 0
      this.areaType = 0
      this.modeType = 100
      this.platForm = 0
      this.date = []
      this.getList(1)
    },
    async getList (pageNum, flag) {
      if (this.loading) return
      this.pageNum = pageNum
      this.loading = true
      let params = {
          pageNum: pageNum,
          pageSize: this.pageSize,
          platForm: this.platForm,
          serveType: this.modeType,
          sortType: this.type,
          orderType: this.sort,
      }
      // 打印
      if (flag) {
          params.pageSize = 1000000
      }
      if (this.keyWord) params.keyWord = this.keyWord
      if (this.orderNo) params.orderNo = this.orderNo
      if (this.gameType !== 0) params.gameId = this.gameType
      if (this.accountStatus !== 10) params.status = this.accountStatus
      if (this.date && this.date.length) {
          params.startTime = this.date[0]
          params.endTime = this.date[1]
      }
      params = Object.assign(params, {})
      let res = await this.$http.get('/deal/selectOrderList', {
          params
      })
      if (res.code === '0') {
          if (flag) {
            res.data && res.data.forEach((item) => {
                item.accountNoDesc = `QQ: ${item.accountNo} - 区服：${item.areaType === 1 ? '安卓' : item.areaType === 2 ? 'IOS' : '-'} ${item.serverName}`
                item.mode = item.serveType ? '顾问模式' : '普通模式'
                if (item.orderStatus === 0) {
                  item.orderStatusDesc = '待支付'
                }
                if (item.orderStatus === 1) {
                  item.orderStatusDesc = `取消订单-${item.statusRemark}`
                }
                if (item.orderStatus === 2) {
                  item.orderStatusDesc = '待验号'
                }
                if (item.orderStatus === 3) {
                  item.orderStatusDesc = '退款中'
                }
                if (item.orderStatus === 4) {
                  item.orderStatusDesc = '已退款'
                }
                if (item.orderStatus === 5) {
                  item.orderStatusDesc = '换绑信息'
                }
                if (item.orderStatus === 6) {
                  item.orderStatusDesc = '交易完成'
                }
                if (item.orderStatus === 7) {
                  item.orderStatusDesc = `售后退款`
                  if (item.loseMoney) {
                    item.orderStatusDesc = `售后退款-(平台赔付 ${item.loseMoney} 元)`
                  }
                }
                item.createTimeDesc = this.formatDate(item.createTime, 'YYYY-MM-DD HH:MM:SS')
                item.paymentTimeDesc = item.paymentTime
            })
            export2Excel(this.columns, res.data, '订单列表')
          } else {
            this.tableData = res.data
            this.total = res.count
          }
          
      } else {
          this.$message({
              type: 'error',
              message: res.desc
          })
      }
      this.loading = false
    },
    typeStatusChange (platForm) {
      this.platForm = platForm
      this.getList(1)
    },
    selectChange () {
        this.accountStatus = 10
        this.gameType = 0
        this.getList(1)
    },
    statusChange (accountStatus) {
      this.accountStatus = accountStatus
      this.getList(1)
    },
    gameStatusChange (gameType) {
      this.gameType = gameType
      this.getList(1)
    },
    // 通过
    changeStatus () {},
    // 展示拒绝弹框
    openDialog () {
        this.dialogVisible = true
    },
    // 拒绝
    changeStatusPauseOff () {},
    showImgList (imgList) {
        let imgArr = []
        imgList.forEach(item => {
          imgArr.push(item.url)
        })
        this.srcList = imgArr
    },
    
    // 点击QQ账号 跳转到相应的 账号详情
    goQQDetails (item) {
        console.log(item)
        let path = '/seller/accTradingDetail'
        const { href } = this.$router.resolve({
            path,
            query: {
                dataId: item.dataId,
                status: 0,
                type: 0
            }
        })
        window.open(href, '_blank')
    },
    goDetail (item) {
      const { href } = this.$router.resolve({ path: '/seller/tradOrderDetail', query: { orderId: item.id } })
      window.open(href, '_blank')
    },
    goUser (id) {
      const { href } = this.$router.resolve({ path: '/dataReport/userInfo', query: { id } })
      window.open(href, '_blank')
      // this.$router.push('/dataReport/userInfo?id=' + id)
    },
    // 页码切换
    sizeChange (val) {
          this.pageNum = 1
          this.pageSize = val
          this.getList(1)
    },
    // 页容切换
    pageChange (val) {
        this.pageNum = val
        this.getList(this.pageNum)
    },
    formatDate (time) {
      return formatDate(time)
    }
  }
}
</script>
<style lang="scss" scoped>
.table-box{
  margin: 20px 0;
  .ganda{
    display: flex;
    .ganda-pic{
      width: 80px;
      margin: 0 5px;
      img{
        width: 100%;
      }
    }
  }
}
.input-box {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    .input-title {
        margin: 0 10px 0 20px;
    }
    .btn {
        margin-top: 10px;
        margin-left: 10px;
    }
}
.table-btn{
  cursor: pointer;
  color: #409eff;
  font-size: 13px;
  font-weight: 500;
  &:hover{
    text-decoration: underline;
  }
}
</style>
